<template>
  <public-modal
    width="1200px"
    :title="title"
    modalStyle="SelectUserModal"
    :publicVisible="publicVisible"
    @cancel="cancel"
  >
    <div slot="content">
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">第三方检测公司:</div>
          <div class="input-item">
            <j-input :maxLength="30" v-model="queryParam.reportCompany" placeholder="请输入第三方检测公司" />
          </div>
        </div>

        <div class="input-wrap">
          <div class="label">上传时间:</div>
          <div class="time-item">
            <start-end-time
              :times="times"
              :showTime="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              @timeChange="timeChange"
              :resetTime="resetTime"
            ></start-end-time>
          </div>
        </div>

        <div class="btn-group">
          <a-button
            class="searchBtn"
            @click="searchQuery(queryParam.createTime_begin, queryParam.createTime_end)"
            type="primary"
          >
            搜索
          </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
        </div>
      </div>

      <div class="table-wrap">
        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :loading="loading"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <template #action="records">
            <!-- @click="download(records)" -->
            <a class="operation dropdown-color" :href="imgPrefix + records.reportUrl" target="_blank" download>下载</a>
          </template>
        </a-table>
      </div>
    </div>
    <div slot="footer"></div>
  </public-modal>
</template>

<script>
import JInput from '@/components/jeecg/JInput'
import publicModal from '@/components/publicModal'
import startEndTime from '@/components/startEndTime'
import { comMethods } from '@/mixins/comMethods'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import axios from 'axios'
export default {
  name: 'SelectUserModal',
  mixins: [JeecgListMixin, comMethods],
  components: { publicModal, startEndTime, JInput },
  data() {
    return {
      title: '第三方检测报告',
      publicVisible: false,
      loading: false,
      imgPrefix: '',

      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '上传时间',
          ellipsis: true,
          align: 'center',
          dataIndex: 'reportUploadTime',
          sorter: true,
        },
        {
          title: '第三方检测公司',
          ellipsis: true,
          align: 'center',
          dataIndex: 'reportCompany',
        },
        {
          title: '检测日期',
          ellipsis: true,
          align: 'center',
          dataIndex: 'reportTime',
        },
        {
          title: '检测结果',
          ellipsis: true,
          align: 'center',
          dataIndex: 'reportResult',
        },
        {
          title: '检测结果',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/restaurant/third_party_report/page',
      },
    }
  },
  methods: {
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.createTime_begin = this.$moment(v).valueOf()
      } else {
        this.queryParam.createTime_end = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.createTime_begin = null
        this.queryParam.createTime_end = null
      }
    },

    show(record) {
      this.title = record.restaurantName + this.title
      this.queryParam.restaurantId = record.id
      this.searchQuery()
      this.publicVisible = true
    },

    download(params) {
      console.log(params, 'params')
      let url = this.imgPrefix + params.reportUrl
      axios.get(url)
      // let link = document.createElement('a')
      // link.style.display = 'none'
      // link.href = url
      // link.setAttribute('download', params.reportName + '.xls')
      // document.body.appendChild(link)
      // link.click()
      // document.body.removeChild(link) //下载完成移除元素
    },
    searchReset() {
      if (this.queryParam.restaurantId) {
        let id = this.queryParam.restaurantId
        this.queryParam = {}
        this.queryParam.restaurantId = id
      } else {
        this.queryParam = {}
      }
      this.resetTime = true
      this.loadData(1)
    },
    cancel() {
      this.queryParam = {}
      this.title = '第三方检测报告'
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 0;

  .table-wrap {
    background: #024c4e;
    padding: 0 20px 30px 20px;
  }

  .search-group {
    background: #024c4e;
  }
}
</style>
